<template>
  <div
    class="module"
    style="background: url() center no-repeat; background-color: "
  >
    <div class="container">
      <div class="container_header wow">
        <p class="title">{{ $t("home_people") }}</p>
        <p class="subtitle">People</p>
      </div>

      <div
        class="container_category wow movedx"
        data-movedx-mid="2"
        data-movedx-distance="15"
      >
        <router-link :to="{ name: 'People' }" class="active">
          <span>{{ $t("home_more") }}&nbsp;></span>
        </router-link>
      </div>

      <div class="container_content">
        <ul class="content_list slickbtn1 clearfix">
          <div class="row grid-space-16 teambox slider_col33">
            <div
              class="col-md-6 col-xs-12"
              v-for="(item, index) in team"
              :key="index"
            >
              <li
                class="item_block wow"
                style="visibility: visible; animation-name: fadeInUp"
              >
                <div class="item_img" target="_blank">
                  <router-link
                    :to="{ name: 'PeopleInfo', query: { id: item.id } }"
                  >
                    <img :src="item.cover | pathImg" />
                  </router-link>
                  <div class="item_mask"></div>
                </div>
                <div class="item_wrapper">
                  <router-link
                    class="item_box"
                    :to="{ name: 'PeopleInfo', query: { id: item.id } }"
                  >
                    <div class="item_info clearfix">
                      <div class="text_wrap">
                        <p class="title ellipsis">{{ item | filterTitle }}</p>
                        <p class="subtitle ellipsis">
                          {{ item | filterSubTitle }}
                        </p>
                      </div>
                    </div>
                    <div class="item_des description">
                      {{ item | filterDescription }}
                    </div>
                  </router-link>
                </div>
              </li>
            </div>
          </div>
        </ul>
      </div>

      <div class="clear"></div>
    </div>
  </div>
</template>

<script>
import { isEn, isMobile } from '@/common/util';
export default {
  name: 'HomeTeam',
  props: {
    team: {
      type: Array
    }
  },
  watch: {
    team() {
      this.$nextTick(() => {
        this.initSlick()
      })
    }
  },
  mounted() {

  },
  filters: {
    filterTitle(item) {
      return isEn() ? item.title_en : item.title
    },
    filterSubTitle(item) {
      return isEn() ? item.extra_en : item.extra
    },
    filterDescription(item) {
      return isEn() ? item.description_en : item.description
    }
  },
  methods: {
    initSlick() {
      let isArrows = isMobile()
      $(".slider_col33").slick({
        dots: true,
        infinite: true,
        slidesToShow: 2,
        slidesToScroll: 2,
        arrows: !isArrows,
        responsive: [
          {

            breakpoint: 880,
            settings: {
              slidesToShow: 1,
              slidesToScroll: 1,
              dots: false

            }
          }
        ]
      });
    }
  }
}
</script>
<style scoped>
@import url("./style.css");
.container_header .subtitle {
  color: #666;
}
</style>
